<template>
  <div class="z-calendar-timeline">
    <el-scrollbar class="z-calendar-timeline__scrollbar">
      <el-timeline>
        <el-timeline-item v-for="(activity, index) in rows" :key="index" color="#5191FF" hide-timestamp>
          <div class="z-calendar-timeline__timestamp">{{ activity.day }}</div>
          <div class="z-calendar-timeline__content">
            <div v-for="(item, i) in activity.list" :key="i" class="z-calendar-timeline__crad" :class="[{ start: item.live_status == 999, end: item.live_status == 992 }]">
              <div class="time">{{ item.start_time | parseTime('{h}:{i}') }}-{{ item.end_time | parseTime('{h}:{i}') }}</div>
              <div class="title">{{ item.course_title }}</div>
              <div class="salutation">{{ item.sec_title }}</div>
              <div class="name">{{ item.teacher_name }}</div>
              <div v-if="item.live_status == 999 || item.live_status == 992" class="status">{{ item.live_status == 992 ? '已结束' : '直播中' }}</div>
            </div>
          </div>
        </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
    <!-- <EduNoData v-if="rows.length == 0" text="今日无课~" /> -->
  </div>
</template>

<script>
import { parseTime } from '@/common/js/filters.js';
// import EduNoData from '@/components/EduNoData';
import { mapState } from 'vuex';
import { range } from './date-util';

const validTypes = ['prev', 'today', 'next'];
const getDayHours = (date, amount) => {
  return range(amount).map((_, index) => new Date(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours() + index).getTime());
};
const getWeekDataDays = (arr1, arr2) => {
  return arr1.reduce((pre, cur) => {
    const target = pre.find(e => e.date == cur.date);
    if (target) {
      target.list.push(cur);
    }
    return pre;
  }, arr2);
};
export default {
  components: {
    // EduNoData
  },
  props: {
    value: {
      type: [Date, String, Number],
      default: _ => {
        return '';
      }
    },
    title: {
      type: String,
      default: _ => {
        return '';
      }
    },
    teacher: {
      type: String,
      default: _ => {
        return '';
      }
    }
  },
  data() {
    return {
      selectedDay: '',
      now: new Date(),
      list: []
    };
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.info,
      token: state => state.user.token
    }),
    prevDayDatePrefix() {
      const temp = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() - 1, 1);
      return parseTime(temp, '{y}-{m}-{d}');
    },
    nextDayDatePrefix() {
      const temp = new Date(this.date.getFullYear(), this.date.getMonth(), this.date.getDate() + 1, 1);
      return parseTime(temp, '{y}-{m}-{d}');
    },
    formatedDate() {
      return parseTime(this.date, '{y}-{m}-{d}');
    },
    formatedToday() {
      return parseTime(this.now, '{y}-{m}-{d}');
    },
    realSelectedDay: {
      get() {
        if (!this.value) return this.selectedDay;
        return this.formatedDate;
      },
      set(val) {
        this.selectedDay = val;
        const date = new Date(val);
        this.$emit('input', date);
      }
    },
    date() {
      if (!this.value) {
        return this.now;
      } else {
        return this.toDate(this.value);
      }
    },
    rows() {
      let days = [];
      const date = this.date;
      date.setHours(0, 0, 0, 0);
      const currentDays = getDayHours(date, 24).map(day => ({
        date: parseTime(day, '{y}-{m}-{d} {h}'),
        day: parseTime(day, '{h}:{i}'),
        list: []
      }));
      days = getWeekDataDays(this.list, currentDays);
      return days;
    }
  },
  created() {
    this.getData(this.value);
  },
  methods: {
    getData(date) {
      this.list = [];
      this.$http.get('/course/admin/schedule/daily', { date: parseTime(date, '{y}-{m}-{d}'), title: this.title, teacher: this.teacher }, res => {
        this.list = res.data.datas;
        this.list.map(item => (item.date = parseTime(item.start_time, '{y}-{m}-{d} {h}')));
        this.$emit('number', this.list.length);
      });
    },
    pickDay(day) {
      this.realSelectedDay = day;
      this.getData(day);
    },
    selectDate(type) {
      if (validTypes.indexOf(type) === -1) {
        throw new Error(`invalid type ${type}`);
      }
      let day = '';
      if (type === 'prev') {
        day = `${this.prevDayDatePrefix}`;
      } else if (type === 'next') {
        day = `${this.nextDayDatePrefix}`;
      } else {
        day = this.formatedToday;
      }
      if (day === this.formatedDate) return;
      this.pickDay(day);
    },
    onSearch() {
      this.getData(this.value);
    },
    toDate(val) {
      if (!val) {
        throw new Error('invalid val');
      }
      return val instanceof Date ? val : new Date(val);
    }
  }
};
</script>

<style lang="scss" scoped>
$text-color-import: #5191ff;
$text-color-auxiliary: #909399;
.z-calendar-timeline {
  &__scrollbar {
    ::v-deep .el-scrollbar__wrap {
      overflow-x: auto;
      max-height: 754px;
    }
  }
  &__timestamp {
    margin-bottom: 8px;
    padding-top: 4px;
    font-size: 16px;
    font-weight: 500;
    color: $text-color-import;
  }
  &__content {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 15px;
  }
  &__crad {
    padding: 20px 10px;
    background: #f6f7fb;
    border-radius: 4px;
    line-height: 1;
    position: relative;
    cursor: pointer;
    transition: all 0.2s;
    box-sizing: border-box;
    .time {
      font-size: 14px;
      font-weight: 400;
      color: $text-color-import;
    }
    .title {
      margin-top: 15px;
      font-size: 14px;
      font-weight: 500;
      color: $text-color-import;
      max-width: 169px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .salutation {
      margin-top: 5px;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
      max-width: 169px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .name {
      margin-top: 15px;
      font-size: 12px;
      font-weight: 400;
      color: $text-color-auxiliary;
      max-width: 169px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .status {
      position: absolute;
      right: 0;
      top: 0;
      padding: 3px 2px;
      font-size: 12px;
      font-weight: 400;
      color: #ffffff;
      border-radius: 0px 4px 0px 4px;
    }
    &.start {
      .status {
        background: #5191ff;
      }
    }
    &.end {
      .time,
      .title {
        color: $text-color-auxiliary;
      }
      .status {
        background: #b7bac1;
      }
    }
    &:hover {
      background: #f0f1f6;
    }
  }
}
</style>
